$(function () {
  // if(!window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
  //   window.location = "/pages"
  // }

  var app2 = new Vue({
    el: '#body',
    data: {
      menuType: false,//菜单开关状态
      activeIndex:0,
      bannerList:[
        {
          imageUrl:"/images/mobile/banner01.png",
          title:"暗黑英雄"
        },{
          imageUrl:"/images/mobile/banner01.png",
          title:"暗黑英雄1"
        },{
          imageUrl:"/images/mobile/banner01.png",
          title:"暗黑英雄2"
        },{
          imageUrl:"/images/mobile/banner01.png",
          title:"暗黑英雄2"
        },
      ],
      menuList: [
        {
          name: "首页",
          tipId:"bannerBox",
        },
        {
          name: "介绍",
          tipId:"animateLight",
        },
        {
          name: "作品",
          tipId:"CGanimationBox",
        },
        {
          name: "加入我们",
          tipId:"joinUs",
        },
        {
          name: "联系我们",
          tipId:"contactMsg",
        }
      ],
      workList: [//光羽动态
        {
          imgurl: "/images/cover01.png",
          title: "标题",
          dateTime: "2021.03.06",
          content: '“ AFK”游戏视频发布，上线于XXXX平台，收到人民网点名表扬。去年四月，从员工那里收集想法并设计下一项工作...'
        },
        {
          imgurl: "/images/cover03.png",
          title: "标题",
          dateTime: "2021.03.06",
          content: '“ AFK”游戏视频发布，上线于XXXX平台，收到人民网点名表扬。去年四月，从员工那里收集想法并设计下一项工作...'
        },
        {
          imgurl: "/images/cover02.png",
          title: "标题",
          dateTime: "2021.03.06",
          content: '“ AFK”游戏视频发布，上线于XXXX平台，收到人民网点名表扬。去年四月，从员工那里收集想法并设计下一项工作...'
        },
        {
          imgurl: "/images/cover03.png",
          title: "标题",
          dateTime: "2021.03.06",
          content: '“ AFK”游戏视频发布，上线于XXXX平台，收到人民网点名表扬。去年四月，从员工那里收集想法并设计下一项工作...'
        },
        {
          imgurl: "/images/cover01.png",
          title: "标题",
          dateTime: "2021.03.06",
          content: '“ AFK”游戏视频发布，上线于XXXX平台，收到人民网点名表扬。去年四月，从员工那里收集想法并设计下一项工作...'
        },
        {
          imgurl: "/images/cover01.png",
          title: "标题",
          dateTime: "2021.03.06",
          content: '“ AFK”游戏视频发布，上线于XXXX平台，收到人民网点名表扬。去年四月，从员工那里收集想法并设计下一项工作...'
        }
      ],
      introducList: [//环境氛围
        {
          id: 0,
          src: "/images/1.png",//缩略图
          bigSrc: "/images/big1.png"//大图查看
        }, {
          id: 1,
          src: "/images/2.png",
          bigSrc: "/images/big3.png"
        }, {
          id: 2,
          src: "/images/3.png",
          bigSrc: "/images/big1.png"
        }, {
          id: 3,
          src: "/images/4.png",
          bigSrc: "/images/big3.png"
        }, {
          id: 4,
          src: "/images/5.png",
          bigSrc: "/images/big1.png"
        }, {
          id: 5,
          src: "/images/6.png",
          bigSrc: "/images/big3.png"
        }, {
          id: 6,
          src: "/images/7.png",
          bigSrc: "/images/big1.png"
        }, {
          id: 7,
          src: "/images/8.png",
          bigSrc: "/images/big3.png"
        },
        {
          id: 8,
          src: "/images/1.png",
          bigSrc: "/images/big1.png"
        }, {
          id: 9,
          src: "/images/2.png",
          bigSrc: "/images/big3.png"
        }, {
          id: 10,
          src: "/images/3.png",
          bigSrc: "/images/big1.png"
        }, {
          id: 11,
          src: "/images/4.png",
          bigSrc: "/images/big3.png"
        }, {
          id: 12,
          src: "/images/5.png",
          bigSrc: "/images/big1.png"
        }, {
          id: 13,
          src: "/images/6.png",
          bigSrc: "/images/big1.png"
        }, {
          id: 14,
          src: "/images/7.png",
          bigSrc: "/images/big1.png"
        }, {
          id: 15,
          src: "/images/8.png",
          bigSrc: "/images/big1.png"
        }
      ],
      CGanimationIndex: 0,
      CGanimationList: [//CG动画
        {
          imgUrl: "/images/mobile/banner01.png",
          videoLink:"/images/video.mp4",
          name: "《创世纪》"
        }, {
          imgUrl: "/images/mobile/backbg.png",
          name: "《创世纪》",
          videoLink:"/images/video.mp44",
        }, {
          imgUrl: "/images/mobile/banner01.png",
          name: "《创世纪》",
          videoLink:"/images/video.mp4",
        }, {
          imgUrl: "/images/mobile/backbg.png",
          name: "《创世纪》",
          videoLink:"/images/video.mp4",
        }, {
          imgUrl: "/images/mobile/banner01.png",
          name: "《创世纪》",
          videoLink:"/images/video.mp4",
        }, {
          imgUrl: "/images/mobile/backbg.png",
          name: "《创世纪》",
          videoLink:"/images/video.mp4",
        }, {
          imgUrl: "/images/mobile/banner01.png",
          name: "《创世纪》",
          videoLink:"/images/video.mp4",
        }, {
          imgUrl: "/images/mobile/backbg.png",
          name: "《创世纪》",
          videoLink:"/images/video.mp4",
        }
      ],
      VideoBuyIndex: 0,
      VideoButList: [//买量视频
        {
          imgUrl: "/images/mobile/banner01.png",
          videoLink:"/images/video.mp4",
          name: "《创世纪》"
        }, {
          imgUrl: "/images/mobile/backbg.png",
          name: "《创世纪》",
          videoLink:"/images/video.mp45",
        }, {
          imgUrl: "/images/mobile/banner01.png",
          name: "《创世纪》",
          videoLink:"/images/video.mp4",
        }, {
          imgUrl: "/images/mobile/backbg.png",
          name: "《创世纪》",
          videoLink:"/images/video.mp4",
        }, {
          imgUrl: "/images/mobile/banner01.png",
          name: "《创世纪》",
          videoLink:"/images/video.mp4",
        }, {
          imgUrl: "/images/mobile/backbg.png",
          name: "《创世纪》",
          videoLink:"/images/video.mp4",
        }, {
          imgUrl: "/images/mobile/banner01.png",
          name: "《创世纪》",
          videoLink:"/images/video.mp4",
        }, {
          imgUrl: "/images/mobile/backbg.png",
          name: "《创世纪》",
          videoLink:"/images/video.mp4",
        }
      ],
      tdartList:[//2d美术
        {
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        },{
          imgUrl:"/images/mobile/cover01.png"
        }
      ],
      audioList: [//光羽音乐
        {
          imgUrl: "/images/audio1.png",
          link:"/images/audio.mp3" 
        }, {
          imgUrl: "/images/audio2.jpg",
          link:"/images/audio.mp34" 
        }, {
          imgUrl: "/images/audio1.png",
          link:"/images/audio.mp3" 
        }, {
          imgUrl: "/images/audio2.jpg",
          link:"/images/audio.mp3" 
        }, {
          imgUrl: "/images/audio1.png",
          link:"/images/audio.mp3" 
        }, {
          imgUrl: "/images/audio2.jpg",
          link:"/images/audio.mp3" 
        }
      ],
      layVideolink:"",//视频链接变量
      layAudioLink:"",//音频链接变量
    },
    mounted: function () {
      //layui 弹窗轮播图 introduc_swiper
      // $(".introduc_swiper .swiper-slide").click(function (e) {
      //   var current = e.currentTarget.dataset.current
      //   layer.photos({
      //     photos: "#introduc_swiper" //格式见API文档手册页
      //     , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
      //   });
      // })
    },
  })

  //swiper
  var mySwiper = new Swiper('.bannerBox', {
    pagination: ".swiper-pagination", //分页器
    paginationType: 'fraction',
    onSlideChangeEnd:function(swiper){ 
      var title = swiper.slides[swiper.activeIndex].dataset.title
      $(".bannerBox .pagination .title").html(title)
    },
    paginationFractionRender: function (swiper, currentClassName, totalClassName) {
      var title = swiper.slides[0].dataset.title
      return "<div class='pagination'><div class='title'>"+title+"</div><div><span class=" + currentClassName + "></span>/<span class=" + totalClassName + "></span></div></div>"
    }
  });

  // 环境氛围模块
  var mySwiper_th = new Swiper('.introduc_swiper', {
    slidesPerView: 2,
    slidesPerColumn: 4,
    slidesPerColumnFill: 'row',
    pagination: ".introduc-pagination", //分页器
    paginationClickable: true,
    paginationBulletRender: function (swiper, index, className) {
      return '<span class="intli ' + className + '"></span>';
    }
  })
  //第一层 CG动画
  var CGanimation = new Swiper('.CGanimationBox .CGanimation', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 10,
    onSlideChangeEnd: function (swiper) {
      app2.$data.CGanimationIndex = swiper.realIndex
      small_CGanimation.slideTo(swiper.realIndex)
    }
  });
  var small_CGanimation = new Swiper('.CGanimationBox .small_CGanimation', {
    spaceBetween: 0,
    // centeredSlides: true,
    // slidesPerView: 'auto',
    slidesPerView: 3,
    touchRatio: 0.2,
    slideToClickedSlide: true,
  });
  //缩略图点击事件
  $(".CGanimationBox .small_CGanimation .swiper-slide").click(function (e) {
    var index = e.currentTarget.dataset.current
    app2.$data.CGanimationIndex = index
    CGanimation.slideTo(index)
  })
  //大图点击查看视频
  $(".CGanimationBox .CGanimation .swiper-slide").click(function (e) {
    var link = e.currentTarget.dataset.link
    app2.$data.layVideolink = link 
    layer.open({
      type: 1,
      title: false,
      shadeClose: true,
      content: $("#layVideo"),
      success: function () {
        // $("#layVideo").get(0).play()
      },
      end: function () {
        $("#layVideo").get(0).pause()
        app2.$data.layVideolink = ""
      }
    })
  })

  //第二层 买量视频
  var CGanimationV = new Swiper('.videoBuyBox .CGanimation', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 10,
    onSlideChangeEnd: function (swiper) {
      app2.$data.VideoBuyIndex = swiper.realIndex
      small_CGanimationV.slideTo(swiper.realIndex)
    }
  });
  var small_CGanimationV = new Swiper('.videoBuyBox .small_CGanimation', {
    spaceBetween: 0,
    // centeredSlides: true,
    // slidesPerView: 'auto',
    slidesPerView: 3,
    touchRatio: 0.2,
    slideToClickedSlide: true,
  });
  //缩略图点击事件
  $(".videoBuyBox .small_CGanimation .swiper-slide").click(function (e) {
    var index = e.currentTarget.dataset.current
    app2.$data.VideoBuyIndex = index
    CGanimationV.slideTo(index)
  })
  //大图点击查看视频
  $(".videoBuyBox .CGanimation .swiper-slide").click(function (e) {
    var link = e.currentTarget.dataset.link
    app2.$data.layVideolink = link 
    layer.open({
      type: 1,
      title: false,
      shadeClose: true,
      content: $("#layVideo"),
      success: function () {
        // $("#layVideo").get(0).play()
      },
      end: function () {
        $("#layVideo").get(0).pause()
        app2.$data.layVideolink = ""
      }
    })
  })

  //第三层 2d美术
  var tdArtList = new Swiper('.tdArtList', {
    slidesPerView: 3,
    slidesPerColumn: 4,
    slidesPerColumnFill: 'row',
    paginationClickable: true,
    // pagination: ".introduc-pagination", //分页器
    // paginationClickable: true,
    // paginationBulletRender: function (swiper, index, className) {
    //   return '<span class="intli ' + className + '"></span>';
    // }
  })
  $(".tdArtList .swiper-slide").click(function(){
    layer.photos({ 
      photos: "#tdArtBox" //格式见API文档手册页
      , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
    });
  })

  //第三层 3d美术
  var three_dArtList = new Swiper('.three_dArtList', {
    slidesPerView: 3,
    slidesPerColumn: 4,
    slidesPerColumnFill: 'row',
    paginationClickable: true,
    // pagination: ".introduc-pagination", //分页器
    // paginationClickable: true,
    // paginationBulletRender: function (swiper, index, className) {
    //   return '<span class="intli ' + className + '"></span>';
    // }
  })

  $(".three_dArtList .swiper-slide").click(function(){
    layer.photos({ 
      photos: "#three_dArtBox" //格式见API文档手册页
      , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
    });
  })
  
   //第五层 音乐
   var audio_swiper = new Swiper('.audio_swiper', {
    // autoplay: 5000,//可选选项，自动滑动
    slidesPerView: 4,
    spaceBetween: -120,
    centeredSlides: true,
    loop: false,
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next'
  })
  audio_swiper.slideTo(3)

  // 图层一屏切换
  var swiperBoxCont = new Swiper('.swiperBoxCont', {
    // autoplay: 5000,//可选选项，自动滑动
    direction:"vertical",  
    onTouchEnd:function(swiper){
      var allNum = swiper.slides.length
      var index = swiper.activeIndex +1
      if(index == allNum){ 
        swiper.destroy(false); 
      }
    }
  })

  //大图点击查看音频
  $(".audioBox .swiper-slide").click(function (e) {
    var link = e.currentTarget.dataset.link
    app2.$data.layAudioLink = link
    layer.open({
      type: 1,
      title: false,
      shadeClose: true,
      content: $("#layAudio"),
      success: function () {
        // $("#layAudio").get(0).play()
      },
      end: function () {
        $("#layAudio").get(0).pause()
        app2.$data.layAudioLink = ""
      }
    })
  })



  //jquery事件
  $(".menuTaggle").click(function (e) {
    menuTaggle()
  })
  // 向下滚动导航
  $(".nextPrev").click(function (e) {
    var idName = e.currentTarget.dataset.idname
    // 定向滚动 
    var scrollTopNum = $('#' + idName).offset().top
    $("body").animate({ scrollTop: scrollTopNum }, "slow");
    // mySwiper_o.slideNext();
  })

  //logo点击 回到顶部首页
  $(".logo").click(function(e){
    var scrollTopNum = $('#bannerBox').offset().top
    $("body").animate({ scrollTop: scrollTopNum }, "slow");
  })

  // 向下切换滚动
  $(".nextPrev_s").click(function(e){
    var idName = e.currentTarget.dataset.idname
    if(idName=="next"){
      swiperBoxCont.slideNext();
    }else{
      swiperBoxCont.slideTo(0);
    }
  })
  // 地图
 
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }
    
    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(113.379168,23.12974);//定义一个中心点坐标
        map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }
    
    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
	var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
	map.addControl(ctrl_nav);
                }
    
    
    initMap();//创建和初始化地图
 
//底部导航点击事件
var clipboard = new Clipboard('.btn');
clipboard.on("success", function () {
  alert("复制成功")
})

// 导航选项卡点击事件
$(".mobiel_left .mobli").click(function(e){
  var tipId = e.currentTarget.dataset.tipid
  menuTaggle()
  if (tipId == "joinUs") {
    window.open("https://www.zhipin.com/gongsir/d22f85933a10bb7203J42NS4Fw~~.html?ka=position-1")
    return
  }
  // 定向滚动 
  var scrollTopNum = $('#' + tipId).offset().top
  $("body").animate({ scrollTop: scrollTopNum }, "slow");
})

  // 事件
  function menuTaggle() {
    var menuType = app2.$data.menuType
    if (!menuType) {
      app2.$data.menuType = !menuType
      $(".mobiel_left").addClass("on");
      $(".shadowMask").addClass("on");
    } else {
      app2.$data.menuType = !menuType
      $(".mobiel_left").removeClass("on");
      $(".shadowMask").removeClass("on");
    }
  }

  //页面滚动监听
  $(window).scroll(function (e) {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // if(scrollTop<=0){//导航背景色
    //   $(".mobielIndex .header").removeClass("active");
    // }else{
    //   $(".mobielIndex .header").addClass("active");
    // }

    // 一屏滚动 当一屏滚动到最后 销毁插件
    //当页面滚动到插件位置 启动插件 
    var scrollTopNum = $('#swiperBoxCont').offset().top
    if(scrollTopNum>=scrollTop){ 
      swiperBoxCont.init(); 
    }
  })
})
